<template>
    <div class="person">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Personal information
            </div>
        </div>
        <personItem ref="personItem" :formList="formList" :formId="formId"></personItem>

        <!-- 按钮 -->
        <van-button class="persionBtn" @click="doSubmit">Submit</van-button>
    </div>
</template>

<script>
import { getdefaultform, uploadbaseform } from '../../api'
import { jiami, jiemi } from '../../utils/aeskey.js'
import personItem from './personItem'
import { Toast } from 'vant'
export default {
    components: { personItem },
    data() {
        return {
            formList: [],//表单列表
            formId: '',//表单id
        }
    },
    methods: {
        //获取指定表单
        async getForm() {
            const f = {
                model: {
                    formId: '',
                    nodeType: ''
                }
            }
            this.formId = this.$store.state.formData[0].formId
            f.model.formId = this.$store.state.formData[0].formId
            console.log(f)
            const res = await getdefaultform(jiami(f))
            console.log(jiemi(res.data))
            this.formList = jiemi(res.data).model.forms[0].content //将表单数据赋值array
            console.log(this.formList, 'formList')
        },
        //提交表单
        async doSubmit() {
            console.log(this.$refs.personItem.form, '表单数据')
            const res = await uploadbaseform(jiami(this.$refs.personItem.form))
            console.log(jiemi(res.data))
            this.$store.dispatch('weiwancehngform')
        }
    },
    created() {
        //获取一个未完成的表单
        this.$store.dispatch('weiwancehngform')
        this.getForm()

    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.person {
    padding-top: (70/@a);

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (90/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    .persionBtn {
        width: (232/@a);
        height: (44/@a);
        background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
        border-radius: (10/@a);
        margin-top: (20/@a);
        margin-left: (70/@a);
    }
}
</style>